<template>
    <div class="" id="facility">
       
        <el-row >
            <el-col :span="24" :offset="1">
                <div class="permission-content ">
                  <el-form :inline="true" ref="form" :model="formData" label-width="80px">
                   <el-row>
                    <el-col>
                      <el-form-item label="设备编号">
                          <el-input v-model="formData.facCode"></el-input>
                     </el-form-item>
                     <el-form-item label="设备名称">
                          <el-input v-model="formData.facName"></el-input>
                     </el-form-item>
                     <el-form-item v-show="isEditor" label="用户名">
                          <el-input v-model="formData.loginName"></el-input>
                     </el-form-item>
                     <el-form-item label="设备状态">
                      <el-select clearable v-model="formData.status" placeholder="请选择">
                        <el-option
                          v-for="item in selStatus"
                          :key="item.dict_key"
                          :label="item.dict_value"
                          :value="item.dict_key">
                        </el-option>
                      </el-select>
                     </el-form-item>
                    </el-col>
                    <el-col :offset="16">
                      <el-form-item >
                        <el-button v-preventReClick type="primary" @click="queryFac" style="margin-left:100px;">查询</el-button>
                        <el-button v-preventReClick type="primary" @click="dialogFormAddFac=true;edit=false;addform={}" >新增</el-button>
                      </el-form-item>
                    </el-col>
                   </el-row>
                     
                      
                  </el-form>
                 </div>
            </el-col>
            <el-col :span="22" :offset="1">
                <div class="permission-content bg-purple user-table">
                    <el-table
                    :data="tableData"
                    border
                    style="width: 100%">
                    <el-table-column
                    align="center"
                      prop="facCode"
                      label="设备编号"
                      >
                    </el-table-column>
                    <el-table-column
                    align="center"
                    v-show="isEditor"
                      prop="loginName"
                      label="所属用户"
                      >
                    </el-table-column>
                    <el-table-column
                    align="center"
                      prop="facName"
                      label="设备名称"
                     
                      >
                    </el-table-column>
                    <el-table-column
                      prop="status"
                      align="center"
                      label="设备状态">
                      
                      <template slot-scope="scope">
                        {{dict&&dict.status[scope.row.status]}}

                        <!-- {{basic&&basic[scope.row.value]}} -->
                      </template>
                    </el-table-column>
                     <el-table-column
                    align="center"
                      prop="facName"
                      label="设备名称"
                     
                      >
                    </el-table-column>
                    <el-table-column
                    align="center"
                        fixed="right"
                        label="操作"
                       
                        >
                        <template slot-scope="scope">
                          <el-button v-preventReClick @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
                          <el-button v-preventReClick @click="bindFac(scope.row)" type="text" size="small">绑定</el-button>
                          <el-button v-preventReClick @click="unBindFac(scope.row)" type="text" size="small">解绑</el-button>
                          <el-button v-preventReClick type="text" @click="dialogFormAddFac=true;edit=true;addform=scope.row" size="small">编辑</el-button>
                          <!-- <el-button v-preventReClick type="text" @click="toRepair(scope.row)" size="small">报修</el-button>
                          <el-button v-preventReClick type="text" @click="toMaintain(scope.row)" size="small">保养</el-button>
                          <el-button v-preventReClick type="text" @click="openManual" size="small">保养手册</el-button> -->
                          <el-button v-preventReClick v-show="isAdmin" @click="delClick(scope.row)" type="text" size="small">删除</el-button>
                        </template>
                    </el-table-column>
                  </el-table>
    <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="queryFac" />

                </div>
            </el-col>
        </el-row>
        <!-- 弹出新增/编辑窗口 -->
        <el-dialog :modal="false" class="new-dialog"  :append-to-body="false" :fullscreen="true"  :title="edit?'编辑设备':'新增设备'" :visible.sync="dialogFormAddFac">
          <el-form :inline="true"  :model="addform">
          <el-row>
            <el-col :span="6">
              <el-form-item label="设备名称" >
                <el-input v-model="addform.facName" autocomplete="off"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="设备编号" >
              <el-input v-model="addform.facCode" autocomplete="off"></el-input>
            </el-form-item>
            
            </el-col>
            <el-col v-show="isEditor" :span="6">
              <el-form-item label="所属用户" >
                <el-select v-model="addform.loginName" filterable placeholder="请选择">
                  <el-option
                    v-for="item in users"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
              <!-- <el-input v-model="addform.loginName" autocomplete="off"></el-input> -->
            </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="设备类型" >
              <el-select v-model="addform.deviceType" placeholder="请选择设备类型">
              <el-option
                v-for="item in selFacType"
                :key="item.dict_key"
                :label="item.dict_value"
                :value="item.dict_key">
              </el-option>
                <!-- <el-option label="区域一" value="shanghai"></el-option> -->
              </el-select>
            </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="设备状态" >
              <el-select v-model="addform.status" placeholder="请选择设备状态">
              <el-option
                          v-for="item in selStatus"
                          :key="item.dict_key"
                          :label="item.dict_value"
                          :value="item.dict_key">
                        </el-option>
              
              </el-select>
            </el-form-item>
             
            </el-col>
            <el-col :span="6">
              <el-form-item label="所属单位" >
              <el-input v-model="addform.company1" autocomplete="off"></el-input>
            </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="所属地区" >
              <el-select filterable v-model="addform.location" >
              <el-option
                v-for="item in selCitys"
                :key="item.dict_key"
                :label="item.dict_value"
                :value="item.dict_key">
              </el-option>
                <!-- <el-option label="区域一" value="shanghai"></el-option> -->
              </el-select>
            </el-form-item>
            </el-col>

          </el-row>
            
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormAddFac = false">取 消</el-button>
            <el-button v-preventReClick type="primary" @click="sumbit()">确 定</el-button>
          </div>
        </el-dialog>
        <router-view></router-view>
    </div>
</template>
<script>
// import { defineComponent } from '@vue/composition-api'
import { queryFac,delFac,editFac,bindFac,unBindFac, insertFac} from '@/api/facility/facility'
import { getAllUser} from '@/api/user'
import { mapState } from 'vuex'
import { disposeToObj,disposeDict } from '@/utils/dicts'
import Pagination from '@/components/Pagination'
export default {
  components: { Pagination },
    data() {
      return{
          text:"测试",
          tableData:[],
          users:[],
          formData:{},
          addform:{},
          editform:{},
          isAdmin:this.$store.state.user.role=='admin'?true:false,
          isEditor:this.$store.state.user.role=='admin'||this.$store.state.user.role=='edit'||this.$store.state.user.role=='serviceman'?true:false,
          basic:this.$store.state.basic.dicts,
          selStatus:disposeDict('status','arr'),
          selFacType:disposeDict('facType','arr'),
          selCitys:disposeDict('citys','arr'),
          total:0,
          listQuery: {
        page: 1,
        limit: 10,
        importance: undefined,
        title: undefined,
        type: undefined,
        sort: '+id'
      },
          dict:{},
          edit:false,
          userMessage:{},
          dialogFormAddFac:false,
          dialogVisible:false,
          dialogFormEditFac:false
      }  
    },
    computed:
     {
        // ...mapState(['basic'])
     },
    created(){
      this.dict.status=disposeDict('status','obj')
      getAllUser().then(res=>{
        this.users=res.data
      })
        this.formData.role=this.$store.state&&this.$store.state.user.role

    },
    mounted(){
      this.queryFac()
    },
    methods:{
      getList(){

      },
      queryFac(){
        this.formData.listQuery=this.listQuery
        queryFac(this.formData).then(res=>{
        this.tableData=res.data.items
        this.total=res.data.total

      })
      },
      //设备报修
      toRepair(data){
        this.$router.push({
          path:'facRe',
          name:'facRe',
          params:data
        })
      },
      openManual(){
        window.open('https://www.gjtool.cn/pdfh5/git.pdf')
      },
       //设备报修
      toMaintain(data){
        this.$router.push({
          path:'facMaintain',
          name:'facMaintain',
          params:data
        })
      },
      //添加设备
      sumbit(){
        this.addform.role=this.$store.state.user.role
        if(this.edit){
          
          editFac(this.addform).then(res=>{
         this.$message({
          message: '编辑成功',
          type: 'success'
        });
        this.dialogFormAddFac=false
        this.queryFac()
       })
        }else{
          insertFac(this.addform).then(res=>{
         this.$message({
          message: '新增成功',
          type: 'success'
        });
        this.dialogFormAddFac=false
        this.queryFac()
       })
        }
       
      },
      //删除设备
      delClick(data){
       delFac(data).then(res=>{
         this.$message({
          message: '删除成功',
          type: 'success'
        });
        this.dialogFormAddFac=false
        this.queryFac()
       })
      },
      //查看详情
      handleClick(data){
        this.$router.push({
          name:'facMessage',
          params:{
            datas:data
          }
        })
        
        this.userMessage=data
      },
      bindFac(data){
        bindFac(data).then(res=>{
         this.$message({
          message: '绑定成功',
          type: 'success'
        });
        this.queryFac()
       })
      },
      unBindFac(data){
        unBindFac(data).then(res=>{
         this.$message({
          message: '解绑成功',
          type: 'success'
        });
        this.queryFac()
       })
      },
      //关闭弹出框
      handleClose(){
        this.dialogVisible = false
      }
      
    }
}
</script>
<style lang='scss' scoped>
#facility{
    padding: 8px 0 0 0;
    .el-dialog__wrapper{
      position: absolute ;
      height: 100%;
      border: 1px black solid;
      .dialog-footer{
        position: absolute;
        bottom: 10px;
        right: 10px;
      }
    }
}


.el-row {
    margin-bottom: 0;
    &:last-child {
      margin-bottom: 0;
    }
  }
 
  .el-col {
    border-radius: 4px;
  }
  .bg-purple-dark {
    background: #99a9bf;
  }
  .bg-purple {
    background: #d3dce6;
  }
  .bg-purple-light {
    background: #e5e9f2;
  }
  .permission-content {
    border-radius: 4px;
    min-height: 36px;
  }
  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }
</style>